<template>
	<view class="content">
		<view class="info">
			<view class="info1">
				<text>地址</text>
				<input
					type="text"
					value=""
					v-model="data.site"
					placeholder="请输入城市地区"
					placeholder-class="inputStyle"
					@click="getMap"
				/>
			</view>
			<view class="info2">
				<text>店名</text>
				<input
					type="text"
					value=""
					v-model="data.name"
					placeholder="请输入店铺名称"
				/>
			</view>
			<!--  -->
			<view class="info4">
				<text>微信号</text>
				<input
					type="text"
					value=""
					v-model="data.wx_num"
					placeholder="请输入微信号"
				/>
			</view>
			<view class="info4">
				<text>支付宝账号</text>
				<input
					type="text"
					value=""
					v-model="data.alipay_num"
					placeholder="请输入支付宝账号"
				/>
			</view>
			<view class="info4">
				<text>银行卡号</text>
				<input
					type="number"
					value=""
					v-model="data.bank_num"
					placeholder="请输入银行卡号"
				/>
			</view>
			<!--  -->

			<view class="info4">
				<text>手机号</text>
				<input
					type="text"
					value=""
					v-model="data.phone"
					placeholder="请输入联系人手机号"
				/>
			</view>

			<view class="info4">
				<text>活动价格</text>
				<input
					type="text"
					value=""
					v-model="data.price"
					placeholder="请输入活动价格"
				/>
			</view>
			<view class="info4">
				<text>满X免1</text>

				<input
					type="number"
					value=""
					v-model="data.free"
					@blur="verification"
					placeholder="例: 满5免1 输入5"
				/>
			</view>
		</view>
		<view class="shop">
			<text>店铺logo/头图</text>
			<u-upload
				ref="uUpload"
				max-count="1"
				:action="action"
				:auto-upload="true"
				@on-success="success1"
				width="190rpx"
				height="190rpx"
			></u-upload>
		</view>
		<view class="surroundings">
			<text>店铺环境图片</text>
			<u-upload
				ref="uUpload"
				max-count="6"
				:action="action"
				:auto-upload="true"
				@on-success="success2"
				width="190rpx"
				height="190rpx"
				multiple
			></u-upload>
		</view>
		<view class="qrCd">
			<text>店铺联系二维码</text>
			<u-upload
				ref="uUpload"
				max-count="1"
				:action="action"
				:auto-upload="true"
				@on-success="success3"
				width="190rpx"
				height="190rpx"
			></u-upload>
		</view>
	<!-- 	<view class="qrCd">
			<text>付款二维码</text>
			<u-upload
				ref="uUpload"
				max-count="1"
				:action="action"
				:auto-upload="true"
				@on-success="success4"
				width="190rpx"
				height="190rpx"
			></u-upload>
		</view> -->
		<view class="applyToSettleIn">
			<button type="default" @click="merchUpd()">确认上传</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			number: '',

			uid: '',
			data: {},
			logo: '',
			store: [],
			code: '',
			receivingQrCd: '',
			action: 'https://star.eyuzn.com/api/upload/wx_upload',
			filesArr: [],
			latitude: '',
			longitude: ''
		};
	},
	methods: {
		verification() {
			var reg = /^([1-9][0-9]*)$/;
			if (!reg.test(this.number)) {
				uni.$showMsg('请输入规范的数字');
				this.number = '';
			}
		},
		//获取地理位置
		getMap() {
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					var dizhi = {
						name: res.name,
						address: res.address,
						latitude: res.latitude,
						longitude: res.longitude
					};
					try {
						uni.setStorageSync('dizhi', dizhi);
					} catch (e) {
						// error
					}
				}
			});
		},
		// logo
		success1(index, lists) {
			console.log(index);
			this.logo = index.data;
		},
		// 环境
		success2(index, lists) {
			console.log(index);
			// this.store = index.data
			this.store.push(index.data);
			console.log('this.store: ', this.store);
		},
		// 联系商户二维码
		success3(index, lists) {
			console.log(index);
			this.code = index.data;
		},
		// 商户收款二维码
		// success4(index, lists) {
		// 	console.log(index);
		// 	this.receivingQrCd = index.data;
		// },
		//获取商户资料
		getInfo() {
			this.$u
				.post('api/shop/shop_datum', {
					uid: this.uid
				})
				.then(res => {
					console.log('res: ', res);
					this.data = res.data;
					console.log('this.data111: ', this.data);
				});
		},
		//商户资料提交更新
		merchUpd() {
			const value = uni.getStorageSync('dizhi');
			console.log('value :>> ', value);

			this.data.site = value.address;
			this.latitude = value.latitude;
			this.longitude = value.longitude;

			console.log('this.latitude1111>> ', this.latitude);
			console.log('this.longitude111>> ', this.longitude);
			console.log('滴哦之 :>> ', this.data.site);
			this.$u
				.post('api/shop/shop_save_datum', {
					uid: this.uid,
					sid: this.data.id,
					name: this.data.name,
					phone: this.data.phone,
					site: value.address,
					price: this.data.price,
					free: this.data.free,
					logo: this.logo,
					store: this.store,
					code: this.code,
					
					latitude: value.latitude,
					longitude: value.longitude,
					
					
					wx_num: this.data.wx_num,
					alipay_num: this.data.alipay_num,
					bank_num: this.data.bank_num,
				})
				.then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$showMsg(res.msg);
						this.data.name = '';
						this.data.phone = '';
						this.data.site = '';
						this.data.price = '';
						// this.$refs.clear
						uni.switchTab({
							url: '../../index/index'
						});
					} else {
						uni.$showMsg('请填入完整的信息');
					}
				});
		}
	},

	onLoad() {
		try {
			const uid = uni.getStorageSync('uid');
			if (uid) {
				this.uid = uid;
			}
		} catch (e) {
			// error
		}

		this.getInfo();
	},
	onShow() {
		try {
			const dizhi = uni.getStorageSync('dizhi');
			if (dizhi) {
				console.log('dizhi :>> ', dizhi);
				this.data.site = dizhi.address;
				// this.latitude = dazhi.latitude;
				// this.longitude = dazhi.longitude;

				console.log('滴哦之 :>> ', this.data.site);
			}
		} catch (e) {
			// error
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;

	.info {
		width: 690rpx;
		// height: 450rpx;
		// height: 666rpx;

		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 0 31rpx;

		.info1,
		.info2,
		.info4 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 131rpx;
			margin-left: 29rpx;
			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.shop,
	.surroundings,
	.qrCd {
		width: 690rpx;
		// height: 282rpx;190rpx
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 31rpx;

		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-bottom: 20rpx;

			.u-upload {
				width: 168rpx;
				height: 168rpx;
				border: 1rpx solid #e0e0e0;
				border-radius: 6rpx;
			}
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 67rpx;
			width: 690rpx;
			height: 100rpx;
			background: linear-gradient(90deg, #ffa73d, #ffdd65);
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
